<template>
  <div class="app-container">
    <input type="text" autocomplete="off" v-model="form.上品Id" placeholder="商品短id">
    <input type="text" autocomplete="off" v-model="form.上品Name" placeholder="商品名称">
    <button type="button" @click="fetchProducts">
      <span>查询</span>
    </button>
    <button type="button" @click="reFatchProduct()">
      <span>重置</span>
    </button>
    <br>
    <el-button type="text" @click="dialogVisible = true">新增测试商品</el-button>
    <el-dialog title="新增测试商品" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="商品名称">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品code">
          <el-input v-model.trim="form.stationCode"></el-input>
        </el-form-item>
        <el-form-item label="商品MongoDB">
          <el-input v-model.trim="form.mongocode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createProduct">立即创建</el-button>
          <el-button @click="cancelAddProduct">重置</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 展示商品列表信息 -->
    <el-table v-loading="listLoading" :data="productList" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="id" width="110">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品短ID" width="110">
        <template slot-scope="scope">
          {{ scope.row.上品Id }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.上品Name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品长ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.mongoId }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <!-- <button type="text" @click="deleteProduct(scope.row.id)">
            删除商品
          </button> -->
          <el-button type="text"
            @click="deleteProduct(scope.row.id)">删除商品</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getProductList } from '@/api/product/product'
import { addProduct } from '@/api/product/product'
import { changeProductStatus } from '@/api/product/product'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      productList: null,
      listLoading: true,
      dialogVisible: false,
      form: {
        上品Id: '',
        上品Name: '',
        mongoId: ''
      }
    }
  },
  created() {
    this.fetchProducts()
  },
  methods: {
    fetchProducts() {
      this.listLoading = true
      getProductList({
        "上品Id": this.form.上品Id,
        "上品Name": this.form.上品Name,
        "mongoId": this.form.mongoId
      }).then(response => {
        console.log(response)
        this.productList = response.data
        this.listLoading = false
      })
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    createProduct() {
      addProduct(
        {
          "上品Id": this.form.stationCode,
          "上品Name": this.form.name,
          "mongoId": this.form.mongocode
        }
      ).then(response => {
        // console.log(response)
        this.$message.success(`${response.message}`)
        this.dialogVisible = false
        this.fetchProducts()
      })
    },
    reFatchProduct() {
      this.form.上品Id = ''
      this.form.上品Name = ''
      this.form.mongoId = ''
      this.fetchProducts()
    },

    cancelAddProduct() {
      this.form.name = "",
        this.form.stationCode = "",
        this.form.mongocode = ""
    },
    
    deleteProduct(productId) {
      alert("确定删除商品？")
      changeProductStatus({ 
        "id": productId 
      }).then(
        response => {
          this.$message.success(`${response.message}`)
          this.fetchProducts()
        }
      )
    }

  }
}
</script>

<style></style>